<!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8 />
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>Picturefill - srcset and sizes attributes</title>
		<link href='//fonts.googleapis.com/css?family=Raleway:500|Source+Sans+Pro:400|Source+Sans+Pro:900' rel='stylesheet' type='text/css'>

		<link href='../examples/styles.css' rel='stylesheet' type='text/css'>
		<link href="https://raw.githubusercontent.com/ResponsiveImagesCG/responsiveimages.org/master/img/favicon.ico" rel="icon">
		<script async="" src="../dist/plugins/intrinsic-dimension/pf.intrinsic.min.js"></script>
		<script async="" src="../dist/picturefill.min.js"></script>

	</head>
	<body>

		<main>
			<h1 class="hed">Picturefill</h1>
			<p class="subhed">A responsive image polyfill</p>
			<span class="ricg-seal">Officially endorsed by the <abbr title="Responsive Issues Community Group">RICG</abbr></span>

			<h2 class="hed-pattern"><code>media</code> example with one webp source qualified with a <code>type</code> attribute</h3>
				<p>Note: Picturefill supports SVG and WebP types on any source element, and will disregard a <code>source</code> if its type is not supported in a particular environment:</p>

			<pre><code>&lt;picture&gt;
  &lt;!--[if IE 9]&gt;&lt;video style=&quot;display: none;&quot;&gt;&lt;![endif]--&gt;
  &lt;source srcset=&quot;../examples/images/large.webp&quot; media=&quot;(min-width: 800px)&quot; type=&quot;image/webp&quot;&gt;
  &lt;source srcset=&quot;../examples/images/large.jpg&quot; media=&quot;(min-width: 800px)&quot;&gt;
  &lt;source srcset=&quot;../examples/images/medium.jpg&quot; media=&quot;(min-width: 400px)&quot;&gt;
  &lt;!--[if IE 9]&gt;&lt;/video&gt;&lt;![endif]--&gt;
  &lt;img srcset=&quot;../examples/images/small.jpg&quot; alt=&quot;A giant stone face at The Bayon temple in Angkor Thom, Cambodia&quot;&gt;
&lt;/picture&gt;</code></pre>

			<picture>
					<!--[if IE 9]><video style="display: none;"><![endif]-->
					<source srcset="../examples/images/large.webp" media="(min-width: 800px)" type="image/webp">
					<source srcset="../examples/images/large.jpg" media="(min-width: 800px)">
					<source srcset="../examples/images/medium.jpg" media="(min-width: 400px)">
					<!--[if IE 9]></video><![endif]-->
					<img srcset="../examples/images/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
			</picture>

		</main>

	</body>
</html>
